<template>
  <div id="app">
    <v-head></v-head>
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <v-footer></v-footer>
    <!-- <v-chat></v-chat> -->
  </div>
</template>

<script>
import vHead from '@/components/common/Header.vue'
import vFooter from './components/common/Footer.vue'
// import vChat from './components/common/Chat.vue'
export default {
  components: {
    vFooter,
    vHead
    // vChat
  },
  name: 'App'
}
</script>

<style lang="sass">
/*
 * 注意这里 lang="sass"
 */
body,html
  padding: 0
  margin: 0
  box-sizing: border-box
  font-size: 10px
div
  box-sizing: border-box
a
  text-decoration: none
#app
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  color: #444
.tac
  text-align: left
.slide-leave-active
  transform: translate(0, 0)
  opacity: 0
.slide-enter-active
  opacity: 1
  transition: all .5s ease-in-out
.slide-enter, .slide-leave-to
  transform: translateX(-50%)
  opacity: 0
</style>
